<template>
  <el-tag :type="tagType" effect="dark" :class="statusClass">
    <i :class="iconClass"></i> {{ status }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  status: {
    type: String,
    required: true
  }
})

const tagType = computed(() => {
  switch (props.status) {
    case '待分配': return 'warning'
    case '已分配': return 'primary'
    case '维修中': return 'info'
    case '已完成': return 'success'
    default: return ''
  }
})

const iconClass = computed(() => {
  switch (props.status) {
    case '待分配': return 'el-icon-time'
    case '已分配': return 'el-icon-user'
    case '维修中': return 'el-icon-tools'
    case '已完成': return 'el-icon-success'
    default: return ''
  }
})

const statusClass = computed(() => {
  return `status-badge status-${props.status}`
})
</script>

<style scoped>
.status-badge {
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 16px;
}

.status-待分配 {
  background-color: #fdf6ec;
  border-color: #f5dab1;
}

.status-已分配 {
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.status-维修中 {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}

.status-已完成 {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
</style>